<template>
  <div class="su-select-dialog-box" ref="goodsSelectList">
    <el-dialog title="请选择" :visible.sync="dialogTableVisible" >
      <el-form>
        <el-form-item label="关键字" label-width="80px">
          <el-input v-model="searchAttrVal" style="width: 300px"></el-input>
          <el-button @click="searchAttr">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>候选项</span>
        </div>
        <div class="su-select-con">
          <div class="su-select-box select-input-box" v-if="isShowAdd">
            <el-input size="mini" style="width: 200px"></el-input>
            <el-button style="float: right" type="primary" size="small" @click="addConfirm">确认</el-button>
          </div>
          <div class="su-select-box">
            <div class="su-select-item-box" v-if="data.length===0">暂无数据</div>
            <el-radio-group class="su-select-item-box" v-model="handleVal.id" @change="selectVal">
              <el-radio class="su-select-item" v-for="(item,idx) in data" :label="item.sku_id" :key="idx">
                {{item.name}}
              </el-radio>
            </el-radio-group>
          </div>
          <div class='u-pagination'>
            <!-- 分页 -->
            <pagination ref='page' @change='getData' :action='fetchData' :pageSize='20'></pagination>
          </div>
        </div>
        <el-button-group class="selectList-btn-group">
          <el-button type="primary" @click="dialogConfirm">确认</el-button>
          <el-button @click="dialogTableVisible=false">取消</el-button>
        </el-button-group>
      </el-card>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'u-invent-goodsSelectList',
  data() {
    return {
      isShowAdd: false,
      data: [],
      dialogTableVisible: false,
      searchAttrVal: '',
      handleVal: {
        id: '',
        type: '',
        name: ''
      },
      typeId: ''
    }
  },

  methods: {
    $show() {
      this.searchAttrVal = ''
      this.dialogTableVisible = true
      this.$nextTick(() => {
        this.$refs.page.changePage()
      })
    },
    async fetchData(aPageNum, aPageSize) {
      let aName = this.searchAttrVal ? this.searchAttrVal : ''
      return this.$api.supplyGetMySkus({
        aMerchantId: this.aFirmId,
        aName,
        aPageNum,
        aPageSize
      })
    },

    getData(data) {
      this.data = data
    },

    dialogConfirm() {
      if (this.handleVal.id) {
        this.$emit('handelGoodsSelectList', this.handleVal)
      }
      this.dialogTableVisible = false
    },

    clear() {
      this.handleVal.id = ''
    },

    selectVal(val) {
      this.handleVal.id = val
      this.handleVal.type = this.selectType
      for (let item of this.data) {
        if (item.sku_id === val) {
          this.handleVal.name = item.name
        }
      }
    },

    searchAttr() {
      this.$refs.page.changePage()
    }
  }
}
</script>
<style lang="less">
  .su-select-item, .su-select-con, .su-select-item-box {
    width: 100%;
  }

  .su-select-box {
    max-height: 300px;
    overflow: auto;
  }

  .su-select-item {
    margin: 0 !important;
    padding: 12px 0;
    border-bottom: 1px solid #ebeef5;
    .el-radio__input {
      float: right;
    }
    .el-radio__label {
      float: left;
    }
  }

  .box-card .el-card__body {
    padding: 0 20px;
  }

  .selectList-btn-group {
    padding-bottom: 10px;
    float: right;
  }

  .select-input-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ebeef5;
    padding: 5px 0;
  }
</style>
